<template>
    <div class="homeSearchDialog">
        <el-dialog
            :modelValue="props.modelValue"
            @update:modelValue="emits('update:modelValue', false)"
            title="搜索"
            width="500"
        >
            <el-form 
                ref="formRef"
                :model="formData" 
                :rules="rules"
                inline
                label-width="0"
                style="width: 100%;"
            >
                <el-form-item 
                    label=""
                    prop="searchVal"
                    style="margin-right: 0;"
                >
                    <div style="display: flex; justify-content: center;">
                        <el-input 
                            v-model="formData.searchVal" 
                            clearable
                            placeholder="请输入搜索内容"
                            style="width: 20vw;"
                        />
                        <el-button 
                            type="primary" 
                            @click="onSubmit(formRef)"
                        >
                            搜索
                        </el-button>
                    </div>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script lang="ts" setup>
    import { ref, reactive, markRaw, onBeforeMount, onMounted, onBeforeUnmount, nextTick, computed, watch } from 'vue'
    import type { Ref, Raw } from 'vue'
    import { useRoute, useRouter } from 'vue-router'
    import { storeToRefs } from 'pinia'
    import { useStore } from '@/store'

    const props = withDefaults(defineProps<{
        modelValue?: boolean,
    }>(), {
        modelValue: false,
    })
    // const { modelValue = false } = defineProps<{
    //     modelValue?: boolean,
    // }>()
    const emits = defineEmits<{
        (e: 'update:modelValue', data: boolean): void,
    }>()
    const route = useRoute()
    const router = useRouter()
    const store = useStore()
    const formRef: Ref<any> = ref(null)
    const formData: Ref<any> = ref({
        searchVal: '',
    })
    
    const rules: any = reactive({
        searchVal: [
            { 
                required: true,
                message: '请输入搜索内容', 
                trigger: 'blur' 
            },
        ],
    })

    const onSubmit = async (formEl: any) => {
        if (!formEl) return;
        await formEl.validate((valid, fields) => {
            if (valid) {
                console.log('submit!')
                emits('update:modelValue', false)
                // location.href = 'http://www.baidu.com/s?wd=' + formData.value.searchVal;
                window.open('http://www.baidu.com/s?wd=' + formData.value.searchVal, '_blank');
            } else {
                console.log('error submit!', fields)
            }
        })
    }
</script>

<style lang="scss" scoped>
    // .homeSearchDialog::after {
    //     content: '';
    //     position: absolute;
    //     left: 0;
    //     top: 0;
    //     z-index: -1;
    //     width: 100vw;
    //     height: 100vh;
    //     background-image: url('@/assets/avatar/bg8.png');
    //     background-size: 100% 100%;
    //     filter: blur(5px);
    // }
    // .homeSearchDialog {
    //     width: 100vw;
    //     height: 100vh;
    //     overflow: hidden;
    // }
    .el-menu-vertical {
        width: 300px;
        height: 100%;
    }
    .my-icon {
        margin: 0 5px;
        cursor: pointer;
    }
</style>